<template>
	<view class="code-complete">
		<view class="complete-title">验证成功!</view>
		<view class="complete-text" @click="petClick()">宠物已领养完成，点击查看 <u-icon name="arrow-right"></u-icon></view>
		<view class="complete-operation">返回首页&nbsp;( {{counter}} )</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				counter: 3,
				timer: ''
			}
		},
		mounted () {
			// 设置定时器
			this.timer = setInterval(() => {
				this.counter -= 1
			}, 1000)
		},
		methods: {
			petClick () {
				uni.switchTab({
				    url: '../../../pages/pet/index'
				});
			}
		},
		watch: {
			// 监听counter值的改变
			'counter' () {
				if (this.counter === -1) {
					clearInterval(this.timer)
					uni.switchTab({
					    url: '../../../pages/index/index'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.code-complete {
		padding: 176rpx 190rpx;
		.complete-title {
			font-size: 48rpx;
			font-weight: 700;
			color: #333333;
			line-height: 66rpx;
			letter-spacing: 4rpx;
			margin-bottom: 60rpx;
			text-align: center;
		}
		.complete-text {
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
		}
		.complete-operation {
			width: 370rpx;
			height: 64rpx;
			background: #FF9A00;
			border-radius: 8rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 64rpx;
			text-align: center;
			margin-top: 120rpx;
		}
	}
</style>
